<template>
  <uni-popup ref="popup" type="bottom" background-color="#ffffff">
    <view class="filter-popup">
      <view class="popup-header">
        <view class="header-btn cancel-btn" @click="cancel">取消</view>
        <view class="popup-title">选择科室分类</view>
        <view class="header-btn confirm-btn" @click="confirm">确定</view>
      </view>
      
      <view class="filter-content">
        <view class="category-list">
          <view 
            class="category-item"
            :class="{ 'active': tempSelectedCategory === category.id }"
            v-for="category in categories"
            :key="category.id"
            @click="selectCategory(category.id)"
          >
            <view class="category-name">{{ category.name }}</view>
            <view class="category-check" v-if="tempSelectedCategory === category.id">
              <text class="iconfont icon-check"></text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  name: 'DepartmentFilter',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    categories: {
      type: Array,
      default: () => []
    },
    selectedCategory: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tempSelectedCategory: ''
    }
  },
  watch: {
    show(val) {
      if (val) {
        this.tempSelectedCategory = this.selectedCategory
        this.$refs.popup.open()
      } else {
        this.$refs.popup.close()
      }
    },
    selectedCategory(val) {
      this.tempSelectedCategory = val
    }
  },
  mounted() {
    this.tempSelectedCategory = this.selectedCategory
  },
  methods: {
    selectCategory(categoryId) {
      this.tempSelectedCategory = categoryId
    },
    
    confirm() {
      this.$emit('confirm', this.tempSelectedCategory)
      this.close()
    },
    
    cancel() {
      this.tempSelectedCategory = this.selectedCategory
      this.$emit('cancel')
      this.close()
    },
    
    close() {
      this.$refs.popup.close()
    }
  }
}
</script>

<style lang="scss" scoped>
.filter-popup {
  background: white;
  border-radius: 24rpx 24rpx 0 0;
  overflow: hidden;
  max-height: 80vh;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx;
  border-bottom: 2rpx solid #f5f5f5;
}

.header-btn {
  font-size: 28rpx;
  padding: 16rpx;
  
  &.cancel-btn {
    color: #8c8c8c;
  }
  
  &.confirm-btn {
    color: #1890ff;
    font-weight: 500;
  }
}

.popup-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #262626;
}

.filter-content {
  max-height: 60vh;
  overflow-y: auto;
}

.category-list {
  padding: 32rpx;
}

.category-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx 24rpx;
  border-radius: 16rpx;
  margin-bottom: 16rpx;
  background: #f8f9fa;
  transition: all 0.3s ease;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  &.active {
    background: #e6f7ff;
    border: 2rpx solid #1890ff;
    
    .category-name {
      color: #1890ff;
      font-weight: 500;
    }
  }
  
  &:active {
    transform: scale(0.98);
  }
}

.category-name {
  font-size: 28rpx;
  color: #262626;
}

.category-check {
  color: #1890ff;
  
  .iconfont {
    font-size: 32rpx;
  }
}
</style>